﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/raphael.js" type="text/javascript"></script>
    <script src="js/Chart3D-1.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var config = {
                chart: {
                    renderTo: "container",//输出控件ID
                    type: "column"//统计图类型（column、pie）
                },
                title: {
                    text: "城市旅游人流量月度统计",//标题内容
                    x: -20 //center
                },
                xAxis: {//x轴内容
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    labels:{
                        rotation:-30   //x轴内容旋转角度
                    }
                },
                yAxis: {//y轴内容
                    title: {
                        text: '人流量(万人次)'
                    },
                    formatter: function () {
                        return this.value;
                    }
                },
                tooltip: {//鼠标移入显示内容
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + "";
                    }
                },
                legend: {//图例设置
                    layout: 'vertical',//横纵排列
                    align: 'right',//水平位置
                    verticalAlign: 'top',//垂直位置
                    x: -10,//距离x轴
                    y: 100//距离Y轴
                },//数据格式
                series: [{ name: '东京',
                    data: [49.9, 71.5, 106.4, 429.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }, {
                    name: '纽约',
                    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
                }, {
                    name: '伦敦',
                    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
                }, {
                    name: '柏林',
                    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
                }]
            };
            var chart = new $.Chart3D(config);
        });                    
    </script>
</head>
<body>
    <div id="container" style="height:400px; width:100%; min-width:800px;"></div>
</body>
</html>
